<template>
	<div class="error-page">
		<div class="error-page__content">
			<h1>Oops!</h1>
			<h2>404 Error</h2>
			<div>
				对不起, 您请求的界面不存在!
			</div>
			<router-link to="/">
				返回
			</router-link>
			

		</div>
	</div>
</template>

<script>
</script>

<style lang="scss">
	@include component(error-page) {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #F6F8FA;
		color: #444;
		display: flex;
		justify-content: center;
		align-items: center;
		background-size: cover;

		@include part(content) {
			width: 960px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			>h1{
				font-size: 168px;
				margin: 0;
				color: #006DF0;
			}
			>h2{
				font-size: 56px;
				margin: 10px 0;
				opacity: 0.8;
			}
			>div{
				font-size: 14px;
				opacity: 0.8;
			}
			>a{
				display: block;
				width: 136px;
				height: 40px;
				line-height: 40px;
				color: #fff;
				background: #006DF0;
				border-color: #006DF0;
				box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
				font-weight: 500;
				text-decoration: none;
				border-radius: 5px;
				 margin-top: 18px;
				 font-size: 16px;
				 text-align: center;
			}
		}
	}
</style>
